import Empty from "@/components/Empty";
import { useDict } from "@/hooks/useDict";
import { defineComponent } from "vue";
export default defineComponent({
	props: {
		detail: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	setup(props) {
		const { variableDictMap, loadVariableDict } = useDict();
		const form = ref<any[]>([]);
		watch(
			() => props.detail,
			() => {
				form.value = props.detail;
				form.value.map(item => {
					loadVariableDict(item);
				});
			},
			{ immediate: true }
		);
		return () => {
			return form.value.length ? (
				<el-form label-width="80px">
					{form.value.map((item: any) => {
						return (
							<el-form-item label={item.label} prop={item.key}>
								{item.param?.dict && variableDictMap.value[item.sn + "_" + item.key] ? (
									<el-select v-model={item.data[item.key]}>
										{variableDictMap.value[item.sn + "_" + item.key].map(dictItem => {
											return <el-option key={dictItem.key} label={dictItem.label} value={dictItem.key} />;
										})}
									</el-select>
								) : item.type == "object" ? (
									<el-input type="textarea" v-model={item.data[item.key]} />
								) : item.type == "number" ? (
									<el-input type="number" v-model={item.data[item.key]} />
								) : (
									<el-input v-model={item.data[item.key]} />
								)}
							</el-form-item>
						);
					})}
				</el-form>
			) : (
				<Empty showButton={false} subtitle="请将需要下发的变量读写权限设置为读写" />
			);
		};
	}
});
